#yur {
  #header {
    width: 100%;
    height: 64px;
    background: @component-background;

    .header-container {
      margin: 0 auto;
      padding: 0 @padding-md;
      width: 100%;
      max-width: 1440px;
      height: 100%;
      line-height: 64px;

      &-logo {
        float: left;
        height: 100%;

        img {
          width: 100%;
          max-width: 36px;

          & + svg {
            margin-left: 6px;
          }
        }

        svg {
          vertical-align: middle;
        }
      }

      &-menu {
        float: right;
        line-height: 64px;
        border-bottom: none;

        &-sub-icon {
          margin-right: 0;
        }

        &-item {
          margin: 0 3px;
          top: 0;
          height: 32px;
          line-height: 32px;
          border-bottom: none;
          vertical-align: middle;
          border-radius: @border-radius-base;
          transition: box-shadow 0.3s @ease-in-out;

          &:hover {
            border-bottom: none;
            box-shadow: @box-shadow-yur;
          }

          &.ant-menu-submenu-selected,
          &.ant-menu-item-selected {
            box-shadow: @box-shadow-yur;
          }
        }

        &-mobile {
          display: none;

          &-popover {
            .ant-popover-arrow {
              display: none;
            }

            .ant-popover-inner {
              box-shadow: @box-shadow-yur;

              .ant-menu-inline {
                border-right: none;
                text-align: center;

                .ant-menu-item {
                  width: 100%;
                  padding: 0 24px;

                  &:active {
                    background-color: transparent;
                  }

                  &-selected {
                    background-color: transparent;
                    box-shadow: @box-shadow-yur;

                    &::after {
                      border-right: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #main {
    padding: 30px 0;
    min-height: calc(~"100vh - 64px");

    #home {
      #search {
        margin: 0 auto;
        padding: 30px;
        width: 100%;
        max-width: 1440px;
        text-align: center;

        img {
          width: 100%;
          .block-base();
        }

        .search {
          .ant-input-group-addon {
            border: none;
          }

          &-input {
            padding: @border-radius-base;
            box-shadow: @box-shadow-yur;

            input {
              border: none;

              &:focus {
                box-shadow: none;
              }
            }

            .ant-input-group-addon {
              &:first-child {
                padding-right: @padding-md;
                color: @primary-color;
                background-color: @body-background;
              }
            }
          }
        }
      }

      .home-container {
        padding: 30px 15px 0 15px;

        &-category {
          margin: 0 auto;
          width: 100%;
          max-width: 1440px;
        }
      }
    }

    #categories {
      margin: 0 auto;
      padding: 15px;
      width: 100%;
      max-width: 1440px;
    }

    #post {
      margin: 0 auto;
      padding: 15px;
      width: 100%;
      max-width: 1440px;

      .post {
        &-banner {
          padding: @border-radius-base;
          box-shadow: @box-shadow-yur;

          .background-image {
            transform: none;
          }
        }

        &-content {
          padding-top: @padding-lg;

          &-header {
            & > h1 {
              text-align: center;
              text-shadow: @box-shadow-yur;
              .text-ellipsis();
            }
          }
        }

        &-footer {
          margin-top: @padding-lg * 2;

          &-reward {
            margin-bottom: @padding-lg;
            text-align: center;

            button {
              box-shadow: @box-shadow-yur-2;
              border: none;
              font-weight: 600;

              &:hover {
                color: @primary-color;
              }
            }
          }

          &-copyright {
            position: relative;
            height: 40px;
            line-height: 40px;
            border-top: 1px solid @component-background;
          }

          &-tag {
            padding: @padding-lg @padding-lg @padding-lg * 2 @padding-lg;
            text-align: center;

            .tag {
              margin: @padding-sm @padding-sm / 2 0 @padding-sm / 2;
              padding: @padding-xs @padding-sm;
              border: none;
              box-shadow: @box-shadow-yur;
            }
          }
        }

        &-catalog {
          position: fixed;
          right: @padding-md;
          bottom: 140px;
          border-radius: 50%;
          box-shadow: @box-shadow-yur-2;
          z-index: 10;

          & > .ant-btn {
            border: 1px solid @border-color-base;
          }
        }
      }
    }

    #links {
      margin: 0 auto;
      padding: 0 15px;
      width: 100%;
      max-width: 1440px;

      .links {
        margin-top: @padding-lg * 2;

        &-card {
          border-radius: @border-radius-base;
          box-shadow: @box-shadow-yur;

          &-cover {
            position: relative;
            padding-bottom: 100%;
            width: 100%;
            height: 0;
            overflow: hidden;

            & > img {
              position: absolute;
              width: 100%;
              height: 100%;
              border-radius: @border-radius-base @border-radius-base 0 0;
              transition: all 0.3s @ease-in-out;

              &:hover {
                transform: scale(1.3);
              }
            }
          }

          &-title,
          &-description {
            .text-ellipsis();
          }
        }
      }
    }

    #about {
      margin: 0 auto;
      padding: 0 15px;
      width: 100%;
      max-width: 1440px;
    }
  }

  #footer {
    padding: 15px 0;
    width: 100%;
    text-align: center;
    background: @component-background;

    .footer-container {
      margin: 0 auto;
      width: 100%;
      max-width: 1440px;
      height: 100%;
      text-align: center;

      .bei-an {
        color: @text-color;
      }
    }
  }
}

@media screen and (max-width: @screen-sm) {
  #yur {
    #header {
      .header-container {
        position: relative;

        &-logo {
          float: none;
          text-align: center;
        }

        &-menu {
          display: none;

          &-mobile {
            display: block;
            position: absolute;
            top: 0;
            right: @padding-md;
          }
        }
      }
    }

    #main {
      padding: 15px 0;

      #home {
        #search {
          padding: 15px;
        }
      }
    }
  }
}
